<template>
  <view class="home_root">

    <image
      class="bg"
      src="/static/home/bg_home.png"
      model="widthFix"
    ></image>

    <view class="main_box">

      <view class="plan_box">
        <view class="title_box">
          <view class="name">{{ plan.name }}</view>
          <view class="arrow_right">查看</view>
        </view>
        <view class="des">{{ plan.describe }}</view>
        <view class="with_flex">
          <view class="with_flex_1" />
          <view class="common_time">{{ plan.createTime }}</view>
        </view>
      </view>

      <view class="common_block with_top with_hor">即将用药</view>
      <view class="next_box">
        <view
          v-for="(item, index) in next"
          :key="index"
          class="medicine_box"
        >
          <view class="name arrow_right">{{ item.name }}</view>
          <view class="des">{{ item.usage + " " + item.dosage + item.unit }}</view>
          <view class="with_flex">
            <view class="with_flex_1" />
            <view class="common_time">{{ item.time }}</view>
          </view>
        </view>
      </view>

      <view class="common_block with_top with_hor">用药记录</view>
      <view class="record_box">
        <view class="with_flex">
          <view class="name">{{ record.name }}</view>
          <view class="des">{{ record.dosage + record.unit }}</view>
        </view>
        <view class="with_flex">
          <view class="with_flex_1" />
          <view class="common_time">{{ record.time }}</view>
        </view>
      </view>

      <view class="common_block with_top with_hor">健康记录</view>
      <view class="record_box">
        <view class="with_flex">
          <view class="name">{{ health.name }}</view>
          <view class="des">{{ health.value + record.unit }}</view>
        </view>
        <view class="with_flex">
          <view class="with_flex_1" />
          <view class="common_time">{{ record.time }}</view>
        </view>
      </view>

    </view>

    <HomeBtn :current="2" />
  </view>
</template>

<script>
import HomeBtn from '../../componet/homeBtn.vue';

export default {
  components: { HomeBtn },
  data() {
    return {
      visible: { show: false },
      plan: {
        name: "急性支气管炎",
        describe: "第一次复诊：咳嗽有好转，依然有痰，咽喉疼痛较为明显",
        createTime: "2024-03-01"
      },
      next: [
        {
          name: "蓝芩口服液",
          usage: "口服",
          dosage: 10,
          unit: 'ml',
          time: "2024-03-02 22:28:48",
          remain: "3小时23分钟",
        },
        {
          name: "氨酚双氢可待因片",
          usage: "口服",
          dosage: 1,
          unit: '片',
          time: "2024-03-02 22:28:48",
          remain: "3小时23分钟",
        },
      ],
      record: {
        name: "蓝芩口服液",
        dosage: 10,
        unit: 'ml',
        time: "2024-03-02 14:28:48",
      },
      health: {
        name: "体温",
        value: "36.5",
        unit: "℃",
        time: "2024-03-02 08:15:33",
      },
    };
  },
  methods: {},
  mounted() { },
  created() { },
};
</script>

<style
  lang="scss"
  scoped
>
.home_root {
  background: #F8FAFE;
  height: 100vh;

  .bg {
    position: absolute;
    top: 0rpx;
    left: 0;
    width: 100%;
  }

  .main_box {
    padding-top: 250rpx;
    height: calc(100% - 98rpx);
    padding-bottom: 24rpx;
    overflow: auto;
    box-sizing: border-box;
    z-index: 1;
    position: relative;
  }

  .plan_box {
    margin-left: 40rpx;
    margin-right: 40rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 8rpx 32rpx 1rpx rgba(61, 79, 124, 0.08);
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    padding: 24rpx 40rpx;

    .title_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .name {
      font-size: 34rpx;
      font-weight: 800;
      color: #0D1F4F;
      line-height: 48rpx;
    }

    .des {
      text-indent: 40rpx;
      margin: 12rpx 0;

      /*字体样式*/
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #0D1F4F;
      line-height: 40rpx;
    }

    .common_time {
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 40rpx;
      color: #9DA7C0;
    }

  }

  .next_box {
    margin-top: 24rpx;
    margin-left: 40rpx;
    margin-right: 40rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 8rpx 32rpx 1rpx rgba(61, 79, 124, 0.08);
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    padding: 24rpx 40rpx;

    .medicine_box {
      padding-bottom: 24rpx;
      border-bottom: #eee solid 1rpx;

      &:last-child {
        border-bottom: none;
        padding-bottom: 0rpx;
      }
    }

    .medicine_box+.medicine_box {
      margin-top: 24rpx;
    }



    .name {
      font-size: 34rpx;
      font-weight: 800;
      color: #0D1F4F;
      line-height: 48rpx;
    }

    .des {
      margin: 12rpx 0;

      /*字体样式*/
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #0D1F4F;
      line-height: 40rpx;
    }

    .common_time {
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 40rpx;
      color: #9DA7C0;
    }

  }

  .record_box {
    margin-top: 24rpx;
    margin-left: 40rpx;
    margin-right: 40rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 8rpx 32rpx 1rpx rgba(61, 79, 124, 0.08);
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    padding: 24rpx 40rpx;

    .name {
      font-size: 34rpx;
      font-weight: 800;
      color: #0D1F4F;
      line-height: 48rpx;
    }

    .des {
      margin: 12rpx 40rpx;
      flex: 1;

      /*字体样式*/
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #9DA7C0;
      line-height: 40rpx;
    }

    .common_time {
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 40rpx;
      color: #9DA7C0;
    }

  }
}
</style>